<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="../sources/js/cookie.js"></script>
</head>
<body onload="countNumber()">


 <div id="upinf"  style="display: none;background-color: yellow">
        修改id：	<input type="text"  id="id"/>
	修改车主：	<input type="text"   id="carOwner"/>
	修改型号：	<input type="text"  id="model"/>
	修改里程数：	<input type="text"  id="mileage"/>
	修改发动机排量：	<input type="text"   id="engineCapacity"/>
	修改生产年份：	<input type="text"  id="productiveDate"/>
	修改购买日期：	<input type="text"  id="purchaseDate"/>
	<input  type="button" name="finish" value="修改" onclick="update()"/>
</div>


<div>
添加车主：	<input type="text"  id="carOwner"/>
添加型号：	<input type="text"  id="model"/>
添加里程数：	<input type="text"  id="mileage"/>
添加发动机排量：	<input type="text"  id="engineCapacity"/>
添加生产年份：	<input type="text"  id="productiveDate"/>
添加购买日期：	<input type="text"  id="purchaseDate"/>
<input  type="button" id="finish" name="finish" value="添加" onclick="add()"/>

</div>

<!-- 
添加车主：	<input type="text"  id="carOwner"/>
添加型号：	<input type="text"  id="model"/>
添加里程数：	<input type="text"  id="mileage"/>
添加发动机排量：	<input type="text"  id="engineCapacity"/>
添加生产年份：	<input type="text"  id="productiveDate"/>
添加购买日期：	<input type="text"  id="purchaseDate"/>
<input  type="button" id="finish" name="finish" value="添加" onclick="add()"/> -->


<div style="width:100%;height:550px;">
<div id="inf" style="float:left;width:50%;">
</div>

<div  style=" float: left;width: 50%;margin-top: 50px ;">           
        <button  style=" float: right;height: 60px;width: 150px;margin-right: 50%;"onclick="gogo()" >车辆保养记录入口</button>
</div>
</div>
<!-- 车辆信息展示区 -->
		<!-- 当前总共有多少页 -->
		<div id = "P11" style="display:none;"></div> 
		<!-- 操作区 -->
		<div id="page" style="margin-left:300px;">
			<div class="operate">
				<div id="P1" class="P1" onclick="fun1()" style="float:left;">上一页</div>
				<div id = "pageIndex" class="pageIndex" style="float:left;margin:0 10px;">1</div><!-- 当前在多少页 -->
				<div id="P2" class="P2" onclick="fun2()" style="float:left;">下一页</div>
			</div>
		</div>
</body>
<script >
function gogo(){
	window.location.href = "http://localhost:8080/maven02/html/seleA.html";
}
function del(data){
	var url = "http://localhost:8080/maven02/manage/updateInfoByPrimaryKey";
	$.ajax({
        type: "get",
        url: url,
        data:{"id":data},
        dataType:'JSON',
        success: function (data)
        {
        	alert("删除成功")
        },
        error:function (XMLHttpRequest, textStatus, errorThrown) { 
            alert(typeof(errorThrown));
        }
     });
	
}
function updateDiv(id,carOwner,model,mileage,engineCapacity,productiveDate,purchaseDate){
	$("#id").val(id);
	$("#carOwner").val(carOwner);
	$("#model").val(model);
	$("#mileage").val(mileage);
	$("#engineCapacity").val(engineCapacity);
	$("#productiveDate").val(productiveDate);
	$("#purchaseDate").val(purchaseDate);
	$("#upinf").css("display","block");
}

function update(){
	var url = "http://localhost:8080/maven02/manage/updateByPrimaryKey";
	var data ={
		 "id":$("#id").val(),	 
		 "carOwner":$("#carOwner").val(),	 
		 "model":$("#model").val(),	 
		 "mileage":$("#mileage").val(),
		 "engineCapacity":$("#engineCapacity").val(),	 
		 "productiveDate":$("#productiveDate").val(),	 
		 "purchaseDate":$("#purchaseDate").val()
	};
	$.ajax({
        type: "get",//指定提交的类型，get对应doget(),post对应dopost()
        url: url,
        data:data,//data代表key -value类型的数据
        dataType:'JSON',
        success: function (data)//success、error代表是否返回成功
        {
        	alert("修改成功");
        },
        error:function (XMLHttpRequest, textStatus, errorThrown) { 
            alert(typeof(errorThrown));
        }
     });
}


function add(){
	var url= "http://localhost:8080/maven02/manage/insert";
	var data={
			 "carOwner":$("#carOwner").val(),
			 "model":$("#model").val(),
			 "mileage":$("#mileage").val(),
			 "engineCapacity":$("#engineCapacity").val(),
			 "productiveDate":$("#productiveDate").val(),
			 "purchaseDate":$("#purchaseDate").val()
	};
	$.ajax({
        type: "get",//指定提交的类型，get对应doget(),post对应dopost()
        url: url,
        data:data,//data代表key -value类型的数据
        dataType:'JSON',
        success: function (data)//success、error代表是否返回成功
        {
        	alert("添加成功");
        },
        error:function (XMLHttpRequest, textStatus, errorThrown) { 
            alert(typeof(errorThrown));
        }
     });

}
function get(){
	var userName = getCookie("userName");
	var url = "http://localhost:8080/maven02/manage/selectAllByCarOwner";
	var pageIndex = Number(document.getElementById("pageIndex").innerText);
	var data={
			 "carOwner":userName,
			 "page":pageIndex,
			 "limit":5
	};
	$.ajax({
        type: "get",
        url: url,
        data:data,
        dataType:'JSON',
        success: function (data)
        {
        	
            console.log(data[3].rows.item);
        	ViewList(data[3].rows.item);     	
        },
        error:function (XMLHttpRequest, textStatus, errorThrown) { 
            alert(typeof(errorThrown));
        }
     });

}
function ViewList(data){
	console.log(data);
	var html = '<table style="border:1px solid #000;width:100%; height:200px;">';
	for(var i = 0; i < data.length ; i++){
		html += '<tr>';
		html += '<td style="border:1px solid #000;width:50px;height:100px;" id="id">'+data[i].id+'</td>';
		html += '<td style="border:1px solid #000;width:100px;height:100px;" id="carOwner">'+data[i].carOwner+'</td>';
		html += '<td style="border:1px solid #000;width:100px;height:100px;" id="model">'+data[i].model+'</td>';
		html += '<td style="border:1px solid #000;width:100px;height:100px;" id="mileage">'+data[i].mileage+'</td>';
		html += '<td style="border:1px solid #000;width:100px;height:100px;" id="engineCapacity">'+data[i].engineCapacity+'</td>';
		html += '<td style="border:1px solid #000;width:100px;height:100px;" id="productiveDate">'+data[i].productiveDate+'</td>';
		html += '<td style="border:1px solid #000;width:100px;height:100px;" id="purchaseDate">'+data[i].purchaseDate+'</td>';
		html +="<td style='border:1px solid #000;width:50px;height:100px;'><input type='submit'  value='修改' href='#' onclick='updateDiv(\""+data[i].id+"\",\""+data[i].carOwner+"\",\""+data[i].model+"\",\""+data[i].mileage+"\",\""+data[i].engineCapacity+"\",\""+data[i].productiveDate+"\",\""+data[i].purchaseDate+"\")'></ a>"
		html += '<td style="border:1px solid #000;width:50px;height:100px;"><input  style="width:50px;height:20px;" type="submit" value="删除" onclick="del('+data[i].id+')" /></td>';
		html += '</tr>';
	}
	html += '</table>';
	$("#inf").empty().append(html);
}
//计算该车主对应的车辆信息条数
function countNumber(){
	var carOwner = getCookie("userName");
	var url1 = "http://localhost:8080/maven02/manage/countAllByCarOwner";
	 //判断我们要分成多少页
	 $.ajax({
	        type: "get", //指定提交的类型 get对应 doGet()方法，post--->doPost()犯法
	        url: url1,    //传输地址的URL
	        data: {
	        	"carOwner":carOwner
	        }, //data代表我们的数据  key -value类型的数据
	        dataType:'JSON',
	        //async：false  这个属性是同步请求，即在服务器返回值之前不再加载下面的代码，默认值为true（不写的时候为true异步请求）
	        async : false, //success和error代表是否返回成功，既后台给前台传输数据是否成功
	        success: function (data)
	        {
	        	PageView(data.count);
	        	get();
	        },
	        error:function (XMLHttpRequest, textStatus, errorThrown) { 
	            alert(typeof(errorThrown));
	        }
	     });
}
//得到总页数
function PageView(data){
	console.log(data);
	var p11 = document.getElementById("P11");
	p11.innerHTML=data;

}
//上一页操作
function fun1(){
	//获取到当前值
	var index = document.getElementById("pageIndex");
	var index_page=Number(index.innerText); //获取到值
	if(index_page == 1){
		alert("已经在首页不能跳转");
		//layer.msg("当前为第一页");
	}else{
		//将值写成上一页
		index.innerHTML = Number(index_page - 1);
		get();
	}
}
//下一页操作
function fun2(){
	var index = document.getElementById("pageIndex");
	var index_page=Number(index.innerText); //获取到值
	console.log(index_page);
	var p_index = document.getElementById("P11");
	var max_page = Math.ceil(Number(p_index.innerText)/5); //获取到最大值
	console.log(max_page);
	if(index_page == max_page){
		alert("已经在尾页不能跳转");
		//layer.msg("没有更多了");
	}else{
		//将值写成下一页
		index.innerHTML = Number(index_page + 1);
		get();
	}
}
</script>
</html>